import React, { Fragment, useContext, useEffect, useState } from "react";
import Head from "next/head";
import Header from "@/components/header";

const Layout = ({ title, children }) => {
  const [scrollTop, setScrollTop] = useState(false);
  const handleScrollTop = () => {
    if (window.scrollY > 70) {
      setScrollTop(true);
    } else if (window.scrollY < 70) {
      setScrollTop(false);
    }
  };

  const handleToTop = () => {
    window.scrollTo(0,0)
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScrollTop);
    return () => {
      window.removeEventListener("scroll", handleScrollTop);
    };
  }, [scrollTop]);

  return (
    <Fragment>
      <Head>
        <title>{title}</title>

      </Head>
      <div id="wrapper">
        <Header />
        {children}
      </div>
      {scrollTop === true ? (
        <span
          id="backToTop"
          className="scroll-to-top scroll-to-target"
          onClick={()=>handleToTop()}
        >
          <i className="fa fa-angle-up"></i>
        </span>
      ) : null}
    </Fragment>
  );
};

export default Layout;
